<template>
  <div>
    <!-- <search-bar /> -->
    <div class="back">
      <div @click="back()">
        <i class="iconfont icon-lujing"></i>
        返回
      </div>
    </div>
    <div class="content">
      <div class="header">发帖</div>
      <div class="article">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          label-position="top"
        >
          <el-form-item label="选择标签" prop="tag">
            <el-radio
              v-model="form.tag"
              v-for="item in label"
              :key="item.id"
              :label="item.id"
              border
              >{{ item.labelName }}</el-radio
            >
          </el-form-item>
          <el-form-item label="填写标题" prop="title">
            <el-input
              style="width: 700px"
              type="text"
              placeholder="请输入内容"
              v-model="form.title"
              maxlength="40"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="正文内容" prop="content" class="quill">
            <quill-editor
              ref="myTextEditor"
              v-model="form.content"
              :options="editorOption"
              style="height: 400px"
              @change="onEditorChange"
            ></quill-editor>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit('form')"
              >发布贴子</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
var _this;

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { rules, editorOption, handlers } from "@/utils/rules";
import { label, addPost } from "@/api/home";
import { mapState } from "vuex";
export default {
  name: "add",
  components: {
    quillEditor,
  },
  data() {
    return {
      showEditor: true,
      editorOption: {
        // 编辑器自定义
        placeholder: "编辑文章内容",
        modules: {
          toolbar: {
            container: editorOption.modules.toolbar,
            handlers: handlers,
          },
        },
      },
      form: {
        tag: 1,
        title: "",
        content: "",
      },
      rules: rules,
      radio1: "1",
      text: "",

      label: [],
    };
  },
  computed: {
    ...mapState({
      id: (state) => state.user.id,
    }),
  },
  watch: {
    radio1(n, o) {
      console.log(n, o);
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    _this.getlabel();
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    onEditorChange({ editor, html, text }) {
      console.log({ editor, html, text });
      console.log(editor, text);
      // this.content = html;
    },
    /**提交表单 */
    onSubmit(formName) {
      console.log(this.form);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          let data = {
            content: _this.form.content,
            accountId: _this.id,
            title: _this.form.title,
            labelId: _this.form.tag,
          };
          addPost(data).then((res) => {
            _this.$refs["form"].resetFields();
            _this.$message({
              message: "发布贴子成功",
              type: "success",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**获取label */
    getlabel() {
      label().then((res) => {
        console.log(res);
        _this.label = res.data;
        console.log(_this.label);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.back {
  width: 1107px;
  margin: 15px auto;
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  color: #303133;
  cursor: pointer;
  i {
    font-size: 14px;
    margin-right: 5px;
  }
}
.content {
  width: 967px;
  margin: 0px auto 50px auto;
  background: #ffffff;
  box-shadow: 0px 0px 7px 0px #dfe1e7;
  border-radius: 4px;
  padding: 30px 70px;
  .header {
    height: 33px;
    font-size: 24px;
    font-weight: 500;
    color: #303133;
    line-height: 33px;
    letter-spacing: 1px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eceff5;
  }
  > .article {
    padding-top: 30px;
    .quill {
      margin-bottom: 96px;
    }
    /deep/ .quill .el-form-item__content {
      line-height: inherit;
    }
    /deep/ .quill .el-form-item__error {
      margin-top: 42px;
    }
  }
}

/deep/ .el-form--label-top .el-form-item__label {
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  line-height: 22px;
}
/deep/ .el-radio {
  margin-right: 5px;
}
// .el-form-item__content
</style>